<template>
	<view class="gal-body">
		<view style="margin-top:50rpx;">
			<text class="gal-block-text gal-h4 gal-color-gray">view 模拟按钮</text>
		</view>
		<view class="gal-margin-top-large">
			<gal-outline-button background="#243b55">
				<view hover-class="gal-tap" 
				slot="title" 
				class="gal-block-text button-text gal-text-center" 
				style="color:#03e9f5;" 
				@tap="onTap">按钮</view>
			</gal-outline-button>
		</view>
		
		<view style="margin-top:50rpx;">
			<text class="gal-block-text gal-h4 gal-color-gray">表单功能按钮</text>
		</view>
		<view class="gal-margin-top-large">
			<gal-outline-button 
			background="#F8F8F8" 
			:lineColors="['#FF0036 ', '#FF0036', '#E233FF', '#E233FF']" 
			:haveButton="true">
				<view hover-class="gal-tap" 
				slot="title" 
				class="gal-block-text button-text gal-text-center" 
				style="color:#FF0036;" 
				>按钮</view>
				<view slot="realBtn">
					<button type="default" form-type="submit" @tap="buttonTap" class="button-text">按钮</button>
				</view>
			</gal-outline-button>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			
		}
	},
	methods: {
		onTap : function () {
			uni.showToast({
				title:"按钮点击",
				icon:"none"
			})
		},
		buttonTap : function () {
			uni.showToast({
				title:"原生按钮点击",
				icon:"none"
			})
		}
	}
}
</script>
<style>
.button-text{line-height:88rpx; height:88rpx; width:100%; font-size:28rpx;}
.gal-tap{font-weight:bold;}
</style>
